<template>
   <div style="margin-top: 1vw"  class="mycard">
      <span class="words">关注列表<i class="el-icon-arrow-right"></i></span>
  <div id="guanzhu-table" style="magin-top: 20vw">
    <br />
    <template>
      <el-table :data="classifyList" border :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"
        >
        <el-table-column prop="srname" label="关注用户的姓名" width="200">

        </el-table-column>
        <el-table-column prop="area" label="关注用户的地区" width="200">

        </el-table-column>
        <el-table-column prop="intro" label="关注用户的介绍">

        </el-table-column>
      </el-table>

    </template>
  </div>
  </div>
</template>
<script>
export default {
  name: "HomeFollow",
  components: {},
  data() {
    return {
      classifyList: [],
      userid: window.sessionStorage.getItem('userid')
    }
  },
  created() {
    this.getClassifyList();
  },
  methods: {
    async getClassifyList() {
      const res = await this.$http.get('music/findUserSonger', { params: { userid: this.userid } });
      this.classifyList = res.data.data;
      console.log(this.classifyList);

    }
  }
}


</script>
<style scoped>
.mycard {
  padding-top: 20px;
  padding-bottom: 10px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);

}
</style>
